<script setup lang="ts">
import { shallowRef } from 'vue';
import { fetchGetDeptTree } from '@/service/api';

defineOptions({
  name: 'UserDetp'
});

interface Emits {
  (e: 'change', kyes: number[]): void;
}

const emit = defineEmits<Emits>();

const deptTree = shallowRef<Api.Common.TreeRecord[]>([]);
// 获取部门树
async function getDeptTree() {
  const { error, data } = await fetchGetDeptTree();

  if (!error) {
    deptTree.value = data;
  }
}

// 点击部门
function clickNode(keys: number[]) {
  emit('change', keys);
}

getDeptTree();
</script>

<template>
  <NCard :bordered="false" size="small" class="card-wrapper">
    <NTree
      block-line
      default-expand-all
      show-line
      :data="deptTree"
      selectable
      key-field="id"
      @update-selected-keys="clickNode"
    />
  </NCard>
</template>

<style scoped></style>
